<template>
    <div class="box">
        <div class="boxHeader">
            <div class="classify flex">
                <div>页面</div>
                <div class="active">组件</div>
            </div>
        </div>
        <div class="content">
            <Components v-bind:data='componentsData1' v-on:addComponent="name=>addComponent(name)"/>
            <Components v-bind:data='componentsData2'/>
        </div>
    </div>
</template>

<script setup>
    import { ref, watchEffect } from 'vue';
import Components from './Components.vue';
    
    const props = defineProps(['data'])
    const componentsData1 = ref([
        {
            name:"热区个性图",
            count:props.data.filter(item=>item.name==='热区个性图').length, 
            maxCount:300
        },
        {
            name:"标题文本",
            count:props.data.filter(item=>item.name==='标题文本').length,
            maxCount:20
        },
        {
            name:"商品",
            count:props.data.filter(item=>item.name==='商品').length,
            maxCount:100
        },
        {
            name:"图片广告",
            count:props.data.filter(item=>item.name==='图片广告').length,
            maxCount:300
        },
        {
            name:"搜索",
            count:props.data.filter(item=>item.name==='搜索').length,
            maxCount:2
        }
    ])

    const componentsData2 = ref([
        {
            name:'优惠券',
            count:props.data.filter(item=>item.name==='优惠券').length,
            maxCount:2
        }
    ])

    const emit = defineEmits(['addComponent'])

    const addComponent = (name) => {
        componentsData1.value.find(item=>item.name===name).count++
        emit('addComponent',name)
    }
</script>

<style scoped>
    .box{
        width:18%;
        margin-right: 9%;
        margin-left: 1%;
        height: 97%;
        background-color: #fff;
        margin-top: 1%;
        box-shadow: 0 0 3px  #ccc;
    }

    .boxHeader{
        width: 100%;
        height: 6vh;
        border-bottom: 2px solid #eee;
        padding-top: 2vh;
    }

    .classify{
        width: 60%;
        height: 65%;
        margin: 0 auto;
        border: 1px solid #eee;
        border-radius: 50vh;
        overflow: hidden;
    }

    .classify > div{
        width: 50%;
        text-align: center;
        line-height: 3.9vh;
        font-size: 12px;
        background-color: #eee;
    }

    .classify>.active{
        background-color: #ED8241;
        color: #fff;
    }
</style>